<template>
  <v-container fluid grid-list-md>
    <v-layout row wrap>
      <v-flex d-flex>
        <!-- v-flex自动设置子元素获得flex: 1 1 auto; 即 flex-grow: 1; flex-shrink: 1; flex-basis: auto; -->
        <v-flex md2 sm2>
          <v-text-field :counter="6" mask="######" prepend-icon="perm_identity" name="lftid" label="请输入玩家ID" v-model="queryForm.lftid"></v-text-field>
        </v-flex>
        <v-flex md2 sm2>
          <v-btn @click="search" dark color="blue" class="mt-2">
            <v-icon>search</v-icon>
            <span class="pl-2 subheading">搜索</span>
          </v-btn>
        </v-flex>
      </v-flex>
      <v-flex md12>
        <!-- 查询数据表格 -->
        <v-data-table :loading="tableLoading" :headers="headers" :items="tableData" hide-actions class="elevation-1">
          <v-progress-linear slot="progress" color="teal" height="5" v-if="showProgress" indeterminate></v-progress-linear>
          <template slot="items" slot-scope="props">
            <td class="text-xs-center subheading">{{ props.item.lftid }}</td>
            <td class="text-xs-center">
              <v-avatar size="36">
                <img :src="props.item.headUrl" alt="">
              </v-avatar>
            </td>
            <td class="text-xs-center subheading">{{ props.item.nickname }}</td>
            <td class="text-xs-center subheading">{{ props.item.createTime }}</td>
            <td class="text-xs-center subheading">{{ props.item.amount }}</td>
            <td class="text-xs-center subheading">{{ props.item.totalTopup }}</td>
            <td class="text-xs-center">
              <v-btn flat round dark color="green darken-1" class="mx-1" @click="grantAccess(props.item)">
                <span class="mx-1">授权</span>
                <v-icon color="green darken-1">accessibility</v-icon>
              </v-btn>
            </td>
          </template>
          <template slot="no-data">
            <div class="text-md-center">
              <v-icon color="yellow darken-3">warning</v-icon>
              <span class="subheading">请先搜索成为代理的玩家</span>
            </div>
          </template>

        </v-data-table>
      </v-flex>
    </v-layout>
    <v-dialog v-model="dialog" max-width="700px">
      <v-card class="px-3 py-3">
        <v-card-title>
          <span class="headline">{{ formTitle }}</span>
        </v-card-title>
        <v-divider></v-divider>
        <v-card-text>
          <v-layout wrap>
            <v-flex xs12 sm8 md6>
              <v-text-field prepend-icon="account_box" label="真实姓名" v-model="form.realName"></v-text-field>
            </v-flex>
            <v-flex xs12 sm8 md6>
              <v-text-field prepend-icon="phone" label="手机号码" v-model="form.telphone"></v-text-field>
            </v-flex>
            <v-flex xs12 sm8 md6>
              <v-text-field mask="######" prepend-icon="supervisor_account" label="上级ID" v-model="form.superId"></v-text-field>
            </v-flex>
            <v-flex xs12 sm8 md6>
              <v-text-field prepend-icon="account_balance" label="开户行" v-model="form.bankName"></v-text-field>
            </v-flex>
            <v-flex xs12 sm8 md6>
              <v-text-field prepend-icon="credit_card" label="银行卡号" v-model="form.bankCard"></v-text-field>
            </v-flex>
            <v-flex xs12 sm8 md6>
              <v-text-field prepend-icon="picture_in_picture" label="身份证号码" v-model="form.idNo"></v-text-field>
            </v-flex>
            <v-flex xs12 sm8 md6>
              <v-layout row align-center>
                <v-flex md1 class="mr-2">
                  <svg t="1525858323871" class="icon" style="" viewBox="0 0 1037 1024" version="1.1" p-id="2795" width="24.3046875" height="24">
                    <path d="M665.600029 614.4c70.4-128 96-249.6 96-249.6l-12.8 0 0 0L640.000029 364.8 524.800029 364.8 524.800029 275.2l281.6 0L806.400029 236.8 524.800029 236.8 524.800029 102.4l-128 0 0 134.4-256 0 0 38.4 256 0 0 89.6L179.200029 364.8l0 38.4 441.6 0c0 6.4 0 6.4-6.4 12.8C614.400029 460.8 582.400029 524.8 556.800029 576 230.400029 448 134.400029 524.8 108.800029 537.6c-217.6 153.6-12.8 345.6 19.2 339.2 230.4 51.2 377.6-44.8 480-166.4 6.4 6.4 12.8 6.4 19.2 6.4 70.4 38.4 409.6 198.4 409.6 198.4s0-140.8 0-192C985.600029 723.2 800.000029 659.2 665.600029 614.4zM499.200029 672c-160 204.8-352 140.8-384 128C38.400029 780.8 12.800029 640 108.800029 595.2c160-51.2 300.8 6.4 403.2 57.6C505.600029 665.6 499.200029 672 499.200029 672z"
                      p-id="2796" fill="#515151"></path>
                  </svg>
                </v-flex>
                <v-flex md10>
                  <v-text-field label="请填写支付宝帐号" v-model="form.alipayAccount"></v-text-field>
                </v-flex>
              </v-layout>
            </v-flex>
            <v-flex xs12 sm8 md6 v-if="!allowEdit">
              <v-select :items="proxyLevelItems" label="请选择代理等级" v-model="form.proxyLevel"></v-select>
            </v-flex>
          </v-layout>
        </v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn color="red darken-1" flat @click.native="dialog = false">取消</v-btn>
          <v-btn color="blue darken-1" flat @click.native="confirmDialog">确定</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </v-container>
</template>

<script>
import * as agent from "../../api/agent";
import { getTime } from "../../util";
import { mapActions, mapMutations } from "vuex";
export default {
  data: () => ({
    dialog: false,
    showProgress: true,
    tableLoading: false,
    paymentType: [
      {
        text: "微信支付",
        value: 1
      },
      {
        text: "支付宝",
        value: 2
      }
    ],
    allowEdit: false,
    payment: null,
    queryType: 1,
    queryTypeText: "",
    queryForm: {
      lftid: ""
    },
    tableData: [],
    proxyLevelItems: [
      {
        text: "总代理",
        value: 1
      },
      {
        text: "一级代理",
        value: 2
      },
      {
        text: "二级代理",
        value: 3
      }
    ],
    headers: [
      { text: "ID", value: "lftid", align: "center", sortable: false },
      { text: "头像", value: "headUrl", align: "center", sortable: false },
      { text: "昵称", value: "nickname", align: "center", sortable: false },
      {
        text: "注册时间",
        value: "createTime",
        align: "center",
        sortable: false
      },
      { text: "钻石数量", value: "telphone", align: "center", sortable: false },
      {
        text: "累计充值",
        value: "sofarTopup",
        align: "center",
        sortable: false
      },
      { text: "操作", value: "actions", align: "center", sortable: false }
    ],
    editedIndex: -1,
    editedItem: {},
    form: {
      uid: "",
      telphone: "",
      bankName: "",
      bandCard: "",
      proxyLevel: 3,
      alipayAccount: "",
      realName: ""
    }
  }),
  mounted() {},
  computed: {
    formTitle() {
      return this.editedIndex === -1 ? "添加代理" : "代理录入";
    }
  },
  watch: {},
  methods: {
    getTime,
    searchPlayer() {
      agent.searchPlayer.r(this.queryForm.lftid).then(({ data }) => {
        if (data.result === 0) {
          data.data.createTime = getTime(data.data.createTime);
          this.tableData = [data.data];
        } else {
          $Vue.$emit("toggleSnackbar", {
            text: data.message
          });
        }
      });
    },
    grantPlayerAccess() {
      agent.grantPlayerAccess.r(this.form).then(({ data }) => {
        $Vue.$emit("toggleSnackbar", {
          text: data.message
        });
      });
    },
    initialize() {
      this.tableData = [
        {
          saleLevel: "Frozen Yogurt",
          headUrl: "http://jqweui.com/logo/logo-icon-small.png",
          lftid: 6.0,
          nickname: "ytb侃侃",
          telphone: 4.0,
          superId: 0,
          saleLevel: 1,
          sales: 888,
          createTime: "2018-4-19",
          gems: 63,
          sofarTopup: 3210
        }
      ];
    },
    editItem(item) {
      this.editedIndex = this.tableData.indexOf(item);
      this.editedItem = {};
      this.dialog = true;
    },
    // 确认提交授权
    save() {
      if (this.editedIndex > -1) {
        Object.assign(this.tableData[this.editedIndex], this.editedItem);
      } else {
        this.tableData.push(this.editedItem);
      }
      this.close();
    },
    search() {
      if (this.queryForm.lftid === "") {
        return $Vue.$emit("toggleSnackbar", {
          text: "请输入玩家ID进行查询"
        });
      }
      this.searchPlayer();
    },
    // 确认授权
    confirmDialog() {
      this.grantPlayerAccess();
    },
    // 授权
    grantAccess(item) {
      this.editItem = item;
      this.form.uid = item.uid;
      this.dialog = true;
    }
  }
};
</script>

<style lang="less" scoped>
</style>

